﻿<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>垃圾桶按钮动画</title>

<link type="text/css" href="css/style.css" rel="stylesheet" />

</head>
<body>
<button class="button">
    <div class="trash">
        <div class="top">
            <div class="paper"></div>
        </div>
        <div class="box"></div>
        <div class="check">
            <svg viewBox="0 0 8 6">
                <polyline points="1 3.4 2.71428571 5 7 1"></polyline>
            </svg>
        </div>
    </div>
    <span>清空回收站</span>
</button>

<script>
document.querySelectorAll('.button').forEach(button => button.addEventListener('click', e => {
    if(!button.classList.contains('delete')) {
        button.classList.add('delete');
        setTimeout(() => button.classList.remove('delete'), 3200);
    }
    e.preventDefault();
}));
</script>

</body>
</html>
